<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
  <script src="../node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="app" class="container">
  <h1>axios</h1>
  <a class="btn btn-primary" v-on:click="get">Get请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="post">Post请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="http">HTTP请求</a>
  <div>
    <span>{{msg}}</span>
  </div>
  <div class="common-pie"></div>
</div>
<script type="text/css">
  .common-pie { float: left; width: 30px; height: 30px; border-radius: 50%; background: #fff;
    background-image: linear-gradient(to right, transparent 50%, #2dc3e8 0); border: 1px solid #2dc3e8; }
</script>
<script>

  new Vue({
    el:"#app",
    data:{
      msg:''
    },
    mounted:function () {
      axios.interceptors.request.use(function (config) {
        console.log("request init."+config)
        return config;
      })
      axios.interceptors.response.use(function (config) {
        console.log("response init."+config)
        return config;
      })
    },
    http:{//配置全局地址
      // root:"localhost:8080"
    },
    methods:{
      get:function () {
        axios.get("../package.json",{
          params:{
            userId:"9999"
          },
          headers:{
            token: "jack"
          }
        }).then(res=>{
          this.msg=res.data;
        }).catch(function (err) {
          console.log("err init"+err)
        })
      },
      post:function () {
        axios.post("../package.json",{
          userId:"0999"
        },{
          headers:{
            token:"tom"
          }
        }).then(res=>{
          this.msg =res.data;
        })
      },
      http:function () {
        axios({
          url:"../package.json",
          method:"get",
          data:{//post的时候参数写这个
            userId:"213123"
          },
          params:{//get的时候参数写这个
            userId:"121111"
          },
          headers:{
            token:"http--test"
          }
        }).then(res=>{
          this.msg=res.data;
        })
      }
    }
  })
</script>
</body>
</html>
